<template>
  <div>
    <div class="header">
      <div class="container">
        <!-- <div class="logo">
          <img src="@/imgs/header/logo.png" alt="网站 Logo" />
        </div> -->
        <div class="site-name">
          <h1>海洋环境内分泌干扰物数据库</h1>
        </div>
      </div>
    </div>
    <div class="menu">
      <el-menu
        :default-active="this.$router.path"
        router
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#0070c0"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <el-menu-item index="/">首页</el-menu-item>
        <el-menu-item index="/search">数据检索</el-menu-item>
        <!-- <el-divider direction="vertical"></el-divider> -->
        <!-- <el-submenu index="2">
          <template slot="title">数据检索</template>
          <el-menu-item index="/search" style="color: #0070c0"
            >行业VOCs</el-menu-item
          >
          <el-menu-item index="/aerosol" style="color: #0070c0"
            >生物气溶胶</el-menu-item
          >
          <el-menu-item index="/serachIntro" style="color: #0070c0"
            >查询说明</el-menu-item
          >
        </el-submenu> -->
        <!-- <el-submenu index="3">
          <template slot="title">研究成果</template>
          <el-menu-item index="/paper" style="color: #0070c0"
            >发表论文</el-menu-item
          >
          <el-menu-item index="/patent" style="color: #0070c0"
            >申请专利</el-menu-item
          >
          <el-menu-item index="/fund" style="color: #0070c0"
            >项目基金</el-menu-item
          >
        </el-submenu> -->
        <el-menu-item index="/news">使用指南</el-menu-item>
        <el-menu-item index="/team">数据录入</el-menu-item>
        <el-menu-item index="/about">关于我们</el-menu-item>
        <!-- <el-menu-item index="/search">VOC查询</el-menu-item>
        <el-menu-item index="/Nine">气溶胶查询</el-menu-item> -->
        <!-- <el-menu-item index="/reaction">reaction</el-menu-item> -->
      </el-menu>
    </div>
  </div>
</template>

<script>
import myImage from "@/imgs/header/logo.png";
export default {
  name: "MenuView",
  data() {
    return {
      activeIndex: "1",
      activeIndex2: "1",
      src: myImage,
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style scoped lang="scss">
@import "../css/character.scss";
.header {
  background-color: #fff;
  color: #000;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  height: 10%;
  width: 100%;
  // line-height: 60px;
}

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: 0;
}

.logo {
  // display: flex;
  max-height: 84px;
  margin-left: 10px;
  margin-right: 10vh;
  max-width: 100%;
  // justify-content: center;
  // align-items: center;
}
.logo img {
  height: 84px;
  // max-width: 100%;
  // max-height: 100%;
}

.site-name {
  // display: flex;
  font-size: 35px;
  font-weight: normal;
  margin: 0;
  width: 100%;
  color: rgba(0, 0, 0, 0.981);
}

.menu {
  margin-top: 0px;
  font-size: 46px !important; /* 设置字体大小为16像素 */
}
.background {
  position: relative;
}

.overlay {
  position: absolute;
  top: -90px;
  left: 0;
  z-index: 1;
  margin-bottom: -100px;
}

/* 菜单栏字体大小(无下拉框) */
.el-menu--horizontal > .el-menu-item {
  font-size: #{$home_menu_size}px;
}

/* 菜单栏字体大小(有下拉框) */
::v-deep .el-menu--horizontal > .el-submenu .el-submenu__title {
  font-size: #{$home_menu_size}px;
}

/**设置子菜单背景色 */
.el-menu--horizontal .el-menu .el-menu-item,
.el-menu--horizontal .el-menu .el-submenu__title {
  background-image: linear-gradient(
    0deg,
    rgb(217, 217, 217),
    rgb(217, 217, 217)
  );
  font-size: 20px;
  text-decoration: underline;
}
.el-menu--popup-bottom-start {
  background-image: linear-gradient(
    0deg,
    rgb(217, 217, 217),
    rgb(217, 217, 217)
  );
}
/**设置子菜单背景色end */
//设置箭头
::v-deep .el-icon-arrow-down:before {
  content: "\e790";
  font-size: large;
  color: white;
}
</style>
